<template>
  <div class="news">
    <Header :isBack="isBack" v-bind:title="title"></Header>
    <div class="top bg-f center padding-24">
      <div class="top-nav space-around">
        <span class="center fs-32" :class="{now:cur==1}" @click="select(1)">
          私信
          <a class="bg-r color-f fs-24">1</a>
        </span>
        <span class="center fs-32" :class="{now:cur==2}" @click="select(2)">
          评论
          <a class="bg-r color-f fs-24">1</a>
        </span>
        <span class="center fs-32" :class="{now:cur==3}" @click="select(3)">
          @我
          <a class="bg-r color-f fs-24">1</a>
        </span>
        <span class="center fs-32" :class="{now:cur==4}" @click="select(4)">
          通知
          <a class="bg-r color-f fs-24">1</a>
        </span>
      </div>
    </div>
    <div class="model model-one bg-f" v-if="cur==1">
      <div class="news-list space-between padding-24" v-for="(item,index) in newslist" :key="index">
        <div class="left">
          <img :src="item.cove" alt />
          <span class="bg-r" v-if="item.read==1"></span>
        </div>
        <div class="right flex-column">
          <div class="space-between">
            <p class="fs-32">{{item.name}}</p>
            <p class="fs-24 color-9">{{item.time}}</p>
          </div>
          <p class="color-6 overFlow">{{item.newscontent}}</p>
        </div>
      </div>
    </div>
    <div class="model model-two" v-if="cur==2">
      <div class="comments-list bg-f padding-24" v-for="(item,index) in newslist" :key="index">
        <div class="list-top space-between">
          <img :src="item.cove" alt />
          <div class="right space-between">
            <p class="fs-26 color-6">{{item.name}}</p>
            <p class="fs-24 color-6">{{item.time}}</p>
          </div>
        </div>
        <div class="list-content space-between">
          <div class="none"></div>
          <div class="comments-content fs-32">{{item.newscontent}}</div>
        </div>
        <div class="list-foot space-between">
          <div class="none"></div>
          <div class="comments-content fs-32 overFlow">{{item.newscontent}}</div>
        </div>
      </div>
    </div>
    <div class="model model-two" v-if="cur==3">
      <div class="comments-list bg-f padding-24" v-for="(item,index) in newslist" :key="index">
        <div class="list-top space-between">
          <img :src="item.cove" alt />
          <div class="right space-between">
            <p class="fs-26 color-6">{{item.name}}</p>
            <p class="fs-24 color-6">{{item.time}}</p>
          </div>
        </div>
        <div class="list-content space-between">
          <div class="none"></div>
          <div class="comments-content fs-32 overFlow">{{item.newscontent}}</div>
        </div>
        <div class="share-foot space-between">
          <div class="none"></div>
          <div class="share-content fs-32 overFlow center">
            <div class="music-box padding-24 bg-f space-between">
              <img :src="item.cove" alt />
              <div class="right">
                <p class="fs-32 overFlow">{{item.newscontent}}</p>
                <p class="fs-26 color-9">{{item.name}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="model model-three" v-if="cur==4">
      <div class="comments-list bg-f padding-24" v-for="(item,index) in newslist" :key="index">
        <div class="list-top space-between">
          <img :src="item.cove" alt />
          <div class="right space-between">
            <p class="fs-26 color-6">
              {{item.name}}
              <span class="fs-26 color-9">赞了你的评论</span>
            </p>
            <p class="fs-24 color-6">{{item.time}}</p>
          </div>
        </div>
        <div class="list-content space-between">
          <div class="none"></div>
          <div class="comments-content fs-32 overFlow">{{item.newscontent}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cur: 1,
      isBack: true,
      title: "我的消息",
      newslist: [
        {
          cove: require("../../assets/image/cove.png"),
          name: "靳东",
          time: "12.30",
          newscontent:
            "三个回复号当天发公司规范化多个复购dhbfg thfd 啥都不会复购那就",
          read: 1
        },
        {
          cove: require("../../assets/image/cove.png"),
          name: "靳东",
          time: "12.30",
          newscontent: "三个回复号当天发公司规范化多个复购",
          read: 0
        }
      ]
    };
  },
  methods: {
    select(i) {
      this.cur = i;
    },
    // 获取我的消息数据
    getMyNews() {
      const url = this.$host1 + `home/message/messageList?type=`+this.cur;
      var params = {};
      this.$axios
        .get(url)
        .then(res => {
          console.log(res.data, "---res.data--我的消息列表");
          if (res.data.code == 200) {
          } else if (res.data.code == 0) {
            this.AlertWin(res.data.message);
            this.$router.push({ path: "/login" });
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    }
  },
  created(){
    //   this.getMyNews();//获取我的消息列表
  }
};
</script>
<style lang="scss" scoped>
.news {
  .top {
    position: fixed;
    z-index: 99;
    top: 1rem;
    left: 0;
    height: 0.88rem;
    .top-nav {
      width: 100%;
      height: 0.6rem;
      border: 0.01rem solid #540479;
      border-radius: 0.3rem;
      span {
        position: relative;
        width: 25%;
        height: 100%;
        color: #540479;
        border-radius: 0.3rem;
      }
      a {
        width: 0.36rem;
        height: 0.36rem;
        border-radius: 50%;
        position: absolute;
        text-align: center;
        line-height: 0.36rem;
        top: -0.1rem;
        right: 0;
        border: 0.01rem solid #fff;
      }
      .now {
        background-color: #540479;
        color: #fff;
      }
    }
  }
  .model {
    margin: 2.08rem 0 0.2rem 0;
  }
  .model-one {
    .news-list {
      height: 1.6rem;
      border-bottom: 0.01rem solid#e9e9e9;
      .left {
        width: 0.88rem;
        height: 0.88rem;
        position: relative;
        //background-color: greenyellow;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          object-fit: cover;
        }
        span {
          width: 0.2rem;
          height: 0.2rem;
          position: absolute;
          border: 0.01rem solid rgba(255, 255, 255, 1);
          border-radius: 50%;
          right: 0;
          top: 0;
        }
      }
      .right {
        width: calc(100% - 1.18rem);
        height: 0.88rem;
        //background-color: greenyellow;
        .overFlow {
          width: 100%;
        }
      }
    }
  }
  .model-two {
    .comments-list {
      height: auto;
      padding-bottom: 0.2rem;
      margin-bottom: 0.2rem;
      .list-top {
        height: 1rem;
        img {
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 50%;
          object-fit: cover;
        }
        .right {
          width: calc(100% - 1rem);
        }
      }
      .list-content {
        height: auto;
        .none {
          width: 0.8rem;
        }
        .comments-content {
          width: calc(100% - 1rem);
        }
      }
      .list-foot {
        margin-top: 0.1rem;
        height: 0.8rem;
        .none {
          width: 0.8rem;
        }
        .comments-content {
          height: 100%;
          line-height: 0.8rem;
          padding: 0 0.2rem;
          box-sizing: border-box;

          background-color: #f8f8f8;
          width: calc(100% - 1rem);
        }
      }
      .share-foot {
        margin-top: 0.1rem;
        height: 1.9rem;
        .none {
          width: 0.8rem;
        }
        .share-content {
          height: 100%;
          line-height: 0.8rem;
          padding: 0.2rem;
          box-sizing: border-box;
          background-color: #f8f8f8;
          width: calc(100% - 1rem);
          .music-box {
            width: 100%;
            height: 100%;
            border-radius: 0.06rem;
            img {
              width: 1.2rem;
              height: 1.2rem;
              object-fit: cover;
              border-radius: 0.06rem;
            }
            .right {
              width: calc(100% - 1.4rem);
              height: 1rem;
              //background-color: greenyellow;
              .overFlow {
                width: 100%;
                height: 0.4rem;
                line-height: 0.4rem;
              }
            }
          }
        }
      }
    }
  }
  .model-three {
    .comments-list {
      height: 1.6rem;
      border-bottom: 0.01rem solid#e9e9e9;
      .list-top {
        //background-color: greenyellow;
        height: 1rem;
        img {
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 50%;
          object-fit: cover;
        }
        .right {
          width: calc(100% - 0.8rem);
          span {
            margin-left: 0.3rem;
          }
        }
      }
      .list-content {
        margin-top: -0.2rem;
        //background-color: #540479;
        height: 0.6rem;
        .none {
          width: 0.6rem;
        }
        .comments-content {
          width: calc(100% - 0.8rem);
        }
      }
    }
  }
}
</style>
